<template>
	<view class="withdrawal-record">
		<NavBar title="提现记录" :isBack="true"></NavBar>
	    <view class="content">
			<view class="record-list">
				<view class="item" v-for="(item,index) in withdrawalRecordsList" :key="item.id">
					<view class="header">
						<view>{{item.type}}</view>
						<view>{{timestampToTime(item.createtime)}}</view>
					</view>
					<view class="footer">
						<view>
							<view class="price">{{item.money}}</view>
							<view>提现金额（元）</view>
						</view>
						<image src="@/static/services/withdraw2.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { withdrawalRecords } from '@/api/services.js'
	import { timestampToTime } from '@/common/index.js'
		import {reactive,onMounted, toRefs} from 'vue'
		const state=reactive({
			withdrawalRecordsList:[]
		})
	async function getWithdrawalRecordsDataList(){
			const res=await withdrawalRecords()
			state.withdrawalRecordsList=res.data.data
			console.log(res,'res');
		}
		function toAddBankCard() {
			uni.navigateTo({
				url: "/pages/services/addBankCard"
			})
		}
	   onMounted(()=>{
			getWithdrawalRecordsDataList()
			const timestamp = 1619183582000;
			const date = new Date(timestamp);
			const formattedDate = date.toLocaleString();
			console.log(formattedDate);
		})
		const { withdrawalRecordsList }=toRefs(state)
</script>

<style lang="scss" scoped>
	.withdrawal-record{
		.content{
			position: relative;
			z-index: 1;
			padding: 36rpx;
			.record-list{
				.item{
					 width: 678rpx;
					 background: #FFFFFF;
					 border-radius: 22rpx 22rpx 22rpx 22rpx;
					 padding: 22rpx 32rpx;
					 box-sizing: border-box;
					 margin-bottom: 26rpx;
					 .header{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 font-weight: 500;
						 font-size: 20rpx;
						 color: #333333;
						 padding-bottom: 6rpx;
						 border-bottom: 1rpx solid #F5F5F5;
					 }
					 .footer{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 margin-top: 15rpx;
						 font-weight: 500;
						 font-size: 20rpx;
						 color: #999999;
						 image{
							 width: 120rpx;
							 height: 81rpx;
						 }
						 .price{
							 font-weight: 500;
							 font-size: 30rpx;
							 color: #333333;
							 margin-bottom: 16rpx;
						 }
					 }
				}
			}
		}
	}

</style>